<template>
    <div class="order-history">
        <h3 class="cll_h3">订单记录</h3>
        <hr />
        <el-form :model="form" label-width="120px" :inline="true" class="formBox">
            <el-form-item size="small">
                <el-select v-model="form.value" placeholder="男士">
                    <el-option label="男士餐" value="男士餐" />
                    <el-option label="女士餐" value="女士餐" />
                    <el-option label="工作餐" value="工作餐" />
                </el-select>
            </el-form-item>
            <el-form-item size="small" :model="form">
                <el-date-picker type="datetime" placeholder="开始时间" v-model="form.start" />
                <span class="middle">至</span>
                <el-date-picker type="datetime" placeholder="结束时间" v-model="form.end" />
            </el-form-item>
            <span class="timeBtn">
                <el-button link size="small" @click="handleFind">筛选</el-button>
            </span>
        </el-form>
        <hr />
        <el-table :data="orderData" style="width: 100%">
            <el-table-column property="orderNumber" label="订单号" width="140" align="center">
                <template #default="scope">{{ scope.row.orderNumber }}</template>
            </el-table-column>
            <el-table-column property="orderProduct" label="配送产品" width="140" align="center" />
            <el-table-column property="orderMoney" label="订单金额" width="140" align="center" />
            <el-table-column property="adress" label="收货地址" width="150" align="center" />
            <el-table-column property="paymentState" label="付款状态" width="140" align="center" />
            <el-table-column property="orderState" label="订单状态" width="140" align="center" />
            <el-table-column property="consignee" label="收货人" width="140" align="center" />
            <el-table-column property="consigneePhone" label="收获人手机" width="140" align="center" />
            <el-table-column property="orderTime" label="下单时间" width="150" align="center" />
            <el-table-column property="look" label="查看" width="120" align="center" fixed="right">
                <span class="orderBtn">
                    <el-button link size="small" @click="handleJump">配送记录</el-button>
                </span>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination background layout="prev, pager, next" :total="total" :default-page-size="pageSize"
                hide-on-single-page @current-change="pageChange" />
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { getorderDetail } from '../../api/user'
import dayJS from 'dayjs'
export default defineComponent({
    name: 'orderHistory',
    data() {
        return {
            form: {
                value: '',
                start: '',
                end: '',
                page: 1,
            },
            str: 'YYYY-MM-DD HH:mm:ss',
            orderData: [{
                orderNumber: '2017060500123',
                orderProduct: '男士餐',
                orderMoney: 900,
                adress: '四川成都',
                paymentState: '已支付',
                orderState: '进行中',
                consignee: '李大宝',
                consigneePhone: '13880123123',
                orderTime: '2017-06-05  12:30',
            }],
            total: 1,
            pageSize: 10,
        }
    }
    ,
    methods: {
        // 筛选
        async handleFind() {
            // @ts-ignore
            let date1 = dayJS(this.form.start).format(this.str)
            // @ts-ignore
            let date2 = dayJS(this.form.end).format(this.str)
            // @ts-ignore
            date1 = (dayJS(date1).valueOf())
            console.log('date1 = ',(dayJS(date1).valueOf()))
            // @ts-ignore
            date2 = (dayJS(date2).valueOf())
           console.log(' date2 = ',(dayJS(date2).valueOf()))
            this.form.start = date1
            this.form.end = date2
            const data = this.form
            data.page = 1
          
            // @ts-ignore
            const res = await getorderDetail(data)
            // @ts-ignore
            this.orderData = res.list 
            // @ts-ignore
            this.total = res.total           
        },
        reset() {
            this.form.start = ''
            this.form.end = ''
            this.form.value = ''
        },
        handleJump() {
            this.$router.push('/user/distributionhistory')
        },
        // 分页切换
        pageChange(page: number) {
            this.orderDetail(page)
        },
        async orderDetail(page = 1) {
            const data = this.form
            data.page = page
            const res = await getorderDetail(data)
            //@ts-ignore
            const { list, total, pageSize } = res
            this.orderData = list
            this.total = total
            this.pageSize = pageSize
        }
    },
    created() {
        this.orderDetail()
    }

})
</script>

<style lang="less" scoped>
.pagination {
    margin: 30px 0 0 400px
}

.formBox {
    margin-top: 15px;
}

.middle {
    padding: 0 10px;
}

.timeBtn {
    display: inline-block;
    width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: rgb(131, 131, 131);
    margin-left: 20px;
    transform: translateY(-6px);

    .el-button.is-link {
        color: white;
        font-size: 14px;
    }

}

.orderBtn {
    display: inline-block;
    width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: rgb(210, 210, 210);
    margin-left: 20px;
    transform: translateY(-6px);

    .el-button.is-link {
        color: rgb(4, 4, 4);
        font-size: 12px;
    }
}
</style>
